<!DOCTYPE HTML>

<html ng-app lang="en">

{{>/head}}

<style type=text/css>
        form input.ng-invalid.ng-dirty {
        			background-color: #FA787E;
        		}

        		form input.ng-valid.ng-dirty {
        			background-color: #78FA89;
        		}
        		.input-group-addon{
        			width:125px;
        		}
</style>

<div class="container"> <!--Normal Width container inside shadow box-->
    <!-- ========================================================================================================= row1 (title) -->
    <div class="row">
        <center> <h1 class="logoBigText"><span class="vcu">new</span>User</h1> </center>
    </div>
    <!-- ========================================================================================================= /row1 (title) -->

    <!-- ========================================================================================================= /row2 (New User Form) -->
    <div class="row">

        <div class="col-md-3"></div>

        <div class="col-md-6">
            <form ng-controller="Controller" ng-model="form" name="form" novalidate>

                <!-- ========================================================================================================= Username Input -->
                <div class="form-group">
                <p class="motto">Username of New User:</p>
                    <input class="form-control" type="text" id="username" name="username" ng-model="user.username" placeholder="Username" required>
                </div>
                <!-- ========================================================================================================= /Username Input -->

                <!-- ========================================================================================================= First and lastname Input -->
                <div class="form-group">

                        <p class="motto">Name of New User:</p>
                        <table width=100%>
                            <tr>
                                <td><input class="form-control" type="text" id="fname" name="fname" ng-model="user.firstName" placeholder="First Name" /></td>
                                <td><input class="form-control" type="text" id="lname" name="lname" ng-model="user.lastName" placeholder="Last Name" /></td>
                             </tr>
                        <table>
                </div>
                <!-- ========================================================================================================= /First and lastname Input -->

                <!-- ========================================================================================================= Email Input -->
                <div class="form-group">
                <p class="motto">Email of New User:</p>
                    <input class="form-control" type="email" id="email" name="email" ng-model="user.emailAddress" placeholder="E-mail" required />
                </div>
                <!-- ========================================================================================================= /Email Input -->

                <!-- ========================================================================================================= Password Input -->
                <div class="form-group">
                <p class="motto">Password:</p>

                    <input class="form-control bottomSpace"
                    type="password"
                    name="password"
                    ng-model="user.password"
                    placeholder="Password"
                    required >

                    <input class="form-control"
                    type="password"
                    name="confirm_password"
                    ng-model="confirm_password"
                    placeholder="Confirm Password"
                    required><span ng-show="(form.confirm_password.$dirty && form.confirm_password.$dirty)
                    && (user.password != confirm_password)  || (confirm_password != user.password )">Password mismatched</span>
                </div>
                <!-- ========================================================================================================= /Password Input -->

                <!-- ========================================================================================================= ValidationBlock -->
                <div class="form-group">
                    <div class="alert alert-warning"
                            class="help-block"
                            ng-show="form.$invalid">
                        <li ng-show="form.username.$error.required">Please enter a username (Required).</li>
                        <li ng-show="form.email.$invalid">Please enter a valid Email (Required).</li>
                        <li ng-show="form.password.$error.required">Please enter a password (Required).</li>
                        <li ng-show="(form.confirm_password.$dirty && form.confirm_password.$dirty) && (user.password != confirm_password) || (confirm_password != user.password )">The Passwords do not Match.</li>
                    </div>
                </div>
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="isAdmin" ng-model="user.isAdmin"> Admin
                        </label>
                    </div>
                </div>
                <div class="col-md-3"></div>
                <!-- ========================================================================================================= /ValidationBlock -->

                <!-- ========================================================================================================= admin Panel -->
                <div class="alert alert-warning">

                    {{=[[ ]]=}}

                        <p>Admin Panel:</p>
                        <pre>{{user | json}}</pre>

                    [[={{ }}=]]

                </div>
                <!-- ========================================================================================================= /admin Panel -->

                <!-- ========================================================================================================= Reset and Submit Buttons -->
                <center>
                    <button ng-click="reset()" type="reset" class="btn btn-primary">Reset</button>
                    <button
                        ng-click="update(user)"
                        type="submit"
                        ng-disabled="form.$invalid || (form.confirm_password.$dirty && form.confirm_password.$dirty) && (user.password != confirm_password) || (confirm_password != user.password )"
                        class="btn btn-success" >Submit New User
                    </button>

                    <!-- <div class="row">
                        <p>{{=[[ ]]=}}
                            New User Created on:  {{'1288323623006' | date:'MM/dd/yyyy, h:mma' }}
                        [[={{ }}=]]</p>
                    </div> -->
                 </center>
                 <!-- ========================================================================================================= /Reset and Submit Buttons -->
            </form><!--/form-->

        </div><!--/col-md-6-->


        <div class="col-md-3"></div>

    </div><!--/row-->
    <!-- ========================================================================================================= /row2 (New User Form) -->
</div><!--/container-->

{{>/foot}}
<script src="/static/js/newuser.js"></script>

<script type="text/javascript">



</script>
</html>